<template>
  <!-- 登录/注册弹窗 -->
  <uni-popup ref="popup" type="bottom" :animation="true" :mask-click="true" @change="onPopupChange" :safe-area="false">
    <view class="login-modal">
      <!-- 标题和关闭按钮 -->
      <view class="modal-header">
        <text class="modal-title">登录/注册</text>
        <view class="close-btn" @click="closeLogin">
          <image src="/static/xxclose.png" mode="aspectFit" style="width: 54rpx;height: 54rpx;"></image>
          <!-- <uni-icons type="close" size="30" color="#999" @click="closeLogin"></uni-icons> -->
        </view>
      </view>

      <!-- 手机号输入 -->
      <view class="input-section">
        <view class="input-row">
          <text class="input-label">手机号</text>
          <text class="country-code">+86</text>
          <input class="phone-input" type="number" placeholder="请填写手机号" v-model="phoneNumber" maxlength="11" />
        </view>
      </view>

      <!-- 验证码输入 -->
      <view class="input-section">
        <view class="input-row">
          <text class="input-label">验证码</text>
          <input class="code-input" type="number" placeholder="请填写验证码" v-model="verificationCode" maxlength="6" />
          <view class="send-code-btn flex jc-c ai-c" @click="sendVerificationCode">
            <text style="color: #ccc;" v-if="countdown > 0">{{ countdown }}</text> 
            <text v-else>发送验证码</text>
          </view>
        </view>
      </view>

      <!-- 登录按钮 -->
      <view class="login-btn" @click="handleLogin">
        登录
      </view>

      <!-- 微信登录 -->
      <view class="wechat-login" @click="handleWechatLogin">
        <view class="wechat-icon">
          <image src="/static/weixinhaha.png" mode="aspectFit" style="width: 86rpx;height: 86rpx;"></image>
          <!-- <uni-icons type="weixin" size="24" color="#fff"></uni-icons> -->
        </view>
        <text class="wechat-text">微信登录</text>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { useUserStore } from '@/store/index.js'

const popup = ref(null)
const phoneNumber = ref('')
const verificationCode = ref('')
const countdown = ref(0)
let timer = null

// 使用 Pinia store
const userStore = useUserStore()

// 打开登录弹窗
const openLogin = () => {
  popup.value.open()
}

// 关闭登录弹窗
const closeLogin = () => {
  uni.showTabBar()
  popup.value.close()
}

// 弹窗状态变化
const onPopupChange = (e) => {
  console.log('弹窗状态变化:', e)
}

// 发送验证码
const sendVerificationCode = () => {
  if (!phoneNumber.value || phoneNumber.value.length !== 11) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  if (countdown.value > 0) return

  // 这里可以调用发送验证码的API
  console.log('发送验证码到:', phoneNumber.value)

  // 开始倒计时
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)

  uni.showToast({ title: '验证码已发送', icon: 'success' })
}

// 处理登录
const handleLogin = () => {
  uni.showToast({ title: '此功能暂时无法使用，请使用微信登录', icon: 'none' })
  return
  if (!phoneNumber.value || phoneNumber.value.length !== 11) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }

  if (!verificationCode.value || verificationCode.value.length !== 6) {
    uni.showToast({ title: '请输入6位验证码', icon: 'none' })
    return
  }

  // 这里可以调用登录API
  console.log('登录信息:', {
    phone: phoneNumber.value,
    code: verificationCode.value
  })

  uni.showToast({ title: '登录成功', icon: 'success' })

  // 登录成功后关闭弹窗
  setTimeout(() => {
    closeLogin()
  }, 1500)
}

// 处理微信登录
const handleWechatLogin = async () => {
  try {
    // 使用 Pinia store 进行微信登录
    const result = await userStore.wechatLogin()
    
    if (result.success) {
      uni.showToast({ 
        title: '登录成功', 
        icon: 'success' 
      })
      closeLogin()
      
      // 可以在这里添加登录成功后的其他逻辑
      // 比如刷新页面数据、跳转等
    } else {
      uni.showToast({ 
        title: result.message || '登录失败', 
        icon: 'none' 
      })
    }
  } catch (error) {
    console.error('微信登录失败:', error)
    uni.showToast({ 
      title: '登录失败，请重试', 
      icon: 'none' 
    })
  }
}

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// 暴露方法给父组件
defineExpose({
  openLogin,
  closeLogin
})
</script>

<style lang="scss" scoped>
.login-modal {
  width: 100%;
  background: #fff;
  border-radius: 24rpx;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 40rpx;
  position: relative;
  box-sizing: border-box;
}

.modal-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 76rpx;
  position: relative;

  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #000;
  }

  .close-btn {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    // background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.input-section {
  margin-bottom: 52rpx;

  .input-row {
    display: flex;
    border-radius: 16rpx;
    // padding: 24rpx;
    gap: 20rpx;

    .input-label {
      font-size: 32rpx;
      color: #000;
      min-width: 80rpx;
    }

    .country-code {
      font-size: 32rpx;
      color: #000;
      //   margin-right: 20rpx;
    }

    .phone-input,
    .code-input {
      flex: 1;
      font-size: 32rpx;
      color: #000;
      background: transparent;
      border: none;
      outline: none;
      border-bottom: 1rpx solid #e0e0e0;
      padding-bottom: 20rpx;

      &::placeholder {
        color: #999;
      }
    }

    .send-code-btn {
      //   background: #f0f0f0;
      color: #333;
      width: 212rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 80rpx;
      font-size: 28rpx;
      cursor: pointer;
      white-space: nowrap;
      border: 1rpx solid rgba(0, 0, 0, 0.2);

      &:active {
        background: #e0e0e0;
      }
    }
  }
}

.login-btn {
  width: 100%;
  background: #0F50DC;
  color: #fff;
  text-align: center;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 66rpx;
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 52rpx;
  cursor: pointer;
  box-sizing: border-box;

  &:active {
    background: #0056cc;
  }
}

.wechat-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  cursor: pointer;

  .wechat-icon {
    width: 86rpx;
    height: 86rpx;
    background: #07c160;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wechat-text {
    font-size: 26rpx;
    color: #7E7E7E
  }
}

.bottom-indicator {
  width: 120rpx;
  height: 6rpx;
  background: #e0e0e0;
  border-radius: 3rpx;
  margin: 40rpx auto 0;
}
</style>
